<template>
    <view class="container">
        <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
        <view class="nav-bar">
            <view class="back-btn" @click="goBack">
                <image src="/static/return.png" mode="aspectFit" class="back-icon"/>
            </view>
            <text class="nav-title">个人信息</text>
        </view>
        
        <view class="content">
            <view class="card-body">
                <view class="info-input">
                    <text class="input-label">头像</text>
                    <image class="detail-avatar" :src="userDetail.user_head || '/static/me.png'" mode="aspectFill"/>
                </view>
                <view class="info-input">
                    <text class="input-label">ID</text>
                    <text class="input-value">{{ userDetail.user_id || '暂无' }}</text>
                </view>
                <view class="info-input">
                    <text class="input-label">姓名</text>
                    <text class="input-value">{{ userDetail.user_name || '暂无' }}</text>
                </view>
                <view class="info-input">
                    <text class="input-label">账号</text>
                    <text class="input-value">{{ userDetail.user_account || '暂无' }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { me } from '@/api/user.js'

export default {
    data() {
        return {
            userDetail: {}
        }
    },
    onShow() {
        this.getUserInfo()
    },
    methods: {
        async getUserInfo() {
            try {
                const res = await me()
                console.log('获取到的用户信息响应：', res)
                
                if (res.code === '2000') {
                    console.log('用户详情数据：', res.data)
                    this.userDetail = res.data
                    
                    // 保存用户信息到本地存储
                    const userInfo = {
                        user_id: res.data.user_id,
                        user_name: res.data.user_name,
                        user_account: res.data.user_account,
                        user_head: res.data.user_head || '/static/me.png'
                    }
                    
                    console.log('准备保存的用户信息：', userInfo)
                    uni.setStorageSync('userInfo', userInfo)
                    uni.setStorageSync('user_id', res.data.user_id)
                } else {
                    console.error('获取用户信息失败，错误码：', res.code)
                    uni.showToast({
                        title: res.message || '获取用户信息失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('获取用户信息失败:', error)
                uni.showToast({
                    title: '获取用户信息失败，请重试',
                    icon: 'none'
                })
            }
        },
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style>
.container {
    position: relative;
    min-height: 100vh;
}

.bg-image {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.content {
    padding: 20px;
    min-height: 100vh;
}

.card-body {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin-top: 40px;
}

.info-input {
    width: 90%;
    height: 44px;
    border: 1px solid rgba(238, 238, 238, 0.5);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
}

.input-label {
    width: 60px;
    color: #333;
    font-size: 14px;
}

.input-value {
    flex: 1;
    color: #333;
    font-size: 14px;
    margin-left: 10px;
}

/* 特殊处理头像那一行的高度 */
.info-input:first-child {
    height: 60px;
}

.detail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    object-fit: cover;
}

.nav-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.back-btn {
    padding: 30px;
    margin-left: -50px;
}

.back-icon {
    width: 30px;
    height: 30px;
}

.nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-right: 40px;
    color: #333;
}
</style> 